<template>
  <div>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
        <div class="d2-text-center">
          <el-form inline>
            <el-form-item :label="'选用分析'" class="d2-font-weight">
              <el-select v-model="value" @change="handleChange">
                <el-option v-for="item in option_list" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <ve-histogram :data="chartData" :settings="chartSettings" :legend="legend" :grid="grid" />
      </el-col>
      <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
        <el-table border :data="chartData.rows">
          <el-table-column prop="title" label="教材名称" />
          <el-table-column prop="variety_prop_sum" label="学校占比" :formatter="(row, column, cellValue, index) => {return (row.variety_prop_sum * 100).toFixed(2) + '%'}" />
          <el-table-column prop="variety_title_sum" label="选用量" />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VeHistogram from 'v-charts/lib/histogram.common'
import VeLine from 'v-charts/lib/line.common'

export default {
  name: 'ChooseAnalysis',
  components: {
    [VeHistogram.name]: VeHistogram,
    [VeLine.name]: VeLine
  },
  data() {
    return {
      value: '',
      option_list: [
        { value: 1, label: '教材选用量从高到底' },
        { value: 2, label: '学校占比从高到底' }
      ],
      chartSettings: {
        showLine: ['variety_prop_sum'],
        axisSite: { right: ['variety_prop_sum'] },
        yAxisType: ['KMB', 'percent'],
        yAxisName: ['选用量', '学校占比'],
        labelMap: {
          variety_title_sum: '选用量',
          variety_prop_sum: '学校占比'
        }
      },
      legend: {
        bottom: 0,
        data: ['选用量', '学校占比']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '6%',
        containLabel: true
      },
      chartData: {
        columns: ['title', 'variety_title_sum', 'variety_prop_sum'],
        rows: [
          { title: '牛羊生产', variety_title_sum: 12, variety_prop_sum: 0.5 },
          { title: '大学与创业教育', variety_title_sum: 17, variety_prop_sum: 0.9 },
          { title: '图形设计', variety_title_sum: 11, variety_prop_sum: 0.2 },
          { title: '宏观经济学原理', variety_title_sum: 28, variety_prop_sum: 0.6 },
          { title: '线性代数', variety_title_sum: 28, variety_prop_sum: 0.28 },
          { title: 'Access数据库基础及应用', variety_title_sum: 15, variety_prop_sum: 0.6 },
          { title: '微积分', variety_title_sum: 21, variety_prop_sum: 0.13 },
          { title: '中国历史文选（上）', variety_title_sum: 29, variety_prop_sum: 0.3 },
          { title: '多媒体课件制作技术', variety_title_sum: 29, variety_prop_sum: 0.2 },
          { title: '数字媒体专业英语', variety_title_sum: 14, variety_prop_sum: 0.1 },
          { title: '风力发电机组装配与调试（第2版）', variety_title_sum: 13, variety_prop_sum: 0.2 }
        ]
      }
    }
  },
  methods: {
    handleChange() {
      this.chartData.rows.sort((a, b) => {
        if (this.value === 1) {
          return b.variety_title_sum - a.variety_title_sum
        } else {
          return b.variety_prop_sum - a.variety_prop_sum
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
